<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/12/14
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-4.1.3-dist/css/bootstrap.css"/>
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="static/js/jquery-2.1.0.js"></script>
    <script src="static/login/js/canva_moving_effect.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#yanzhengma").click(function () {
                getmessage();
            })
        $("#shouji").click(function () {
            phoneLogin();
        })

        })

        function getmessage() {
            $.ajax({
                url:"/phoneLogin",
                type:"get",
                data:$("#id-From").serialize(),
                success:function (result) {
                    if(result.status==200){
                        alert(result.message)
                    }else{
                        alert(result.message)
                    }
                }
            })
        }

        //登录
        function phoneLogin() {
            var data={
                "massage":$("#mass").val()
            }
            $.ajax({
                url:"/phoneLogin",
                type:"post",
                data:data,
                success:function (result) {
                    if(result.status==200){
                        alert(result.message)
                        window.location.href="/user/home";
                    }else{
                        alert(result.message)
                    }

                }
            })
        }
    </script>

    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        body{
            background:url("static/js/imges/36.gif" );
            background-size: 100% 100%;

        }
        .container_title{
            width:530px;
            height:400px;
            background:#0b0c4c;
            background-color: rgba(0,0,0,0.3);
            margin:0 auto;
            margin-top: 140px;
            border-radius: 35px;
            box-shadow: 10px 10px 10px #1d2124;
        }
        .container h1{
            color: #fff;
            padding-top: 20px;
            font-family: 幼圆;
            font-weight: bold;

        }
        .form-control{
            width:370px;
            height:47px;
            border-radius: 50px;
            margin-top: 36px;
            margin-left:50px;
            border: 1px solid deepskyblue;

        }
        .form-check-label{
            color:#fff;
            margin-left: 60px;
            margin-top: 10px;
        }

        button{
            width:250px;
            height:40px;
            margin-left: 100px;
            margin-top: 15px;
            background: #fff;
        }
        button a{
            color:#fff;
        }
        #code{
            margin-left: 300px;
            margin-top: -42px;
        }

    </style>
</head>
<body>
<div class="container_title">
    <div class="container">
        <h1 align="center">欢迎登录</h1>
        <form id="id-From">
            <div class="form-group">
                <input type="text" class="form-control" name="phone"  placeholder="请输入手机号">
            </div>

            <div class="form-group">
                <input type="text" class="form-control" id="mass" placeholder="发送验证码" name="massage">
            </div>

            <button id="yanzhengma"  type="button" class="btn btn-success" style="width:100px;height:50px">发送验证码</button>
            <button id="shouji" type="button"  class="btn btn-primary btn-block" style="width:100px;height:50px;margin-left: 300px;margin-top: -50px">手机登录</button>
            <span>${msg}</span>

        </form>
    </div>
</div>
</body>
</html>
